<template>
  <div class="app-container" id="userContainer">
    <el-row :gutter="20" class="header">
      <el-col :span="7">
        <el-input
          placeholder="请输入角色名..."
          v-model="queryForm.query"
          clearable
          @keyup.enter="initRoleList(1)"
        ></el-input>
      </el-col>
      <el-button type="primary" :icon="Search" @click="initRoleList(1)"
        >搜索</el-button
      >
      <el-button
        type="success"
        :icon="DocumentAdd"
        @click="saveSysRoleHandler(-1)"
        v-hasPerm="['system:role:add']"
        >新增</el-button
      >
      <el-popconfirm
        title="您确定批量删除这些记录吗？"
        @confirm="handleDelete(null)"
      >
        <template #reference>
          <el-button
            type="danger"
            :icon="Delete"
            :disabled="delBtnStatus"
            v-hasPerm="['system:role:delete']"
            >批量删除</el-button
          >
        </template>
      </el-popconfirm>
    </el-row>
    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
       :row-style="{ height: '40px' }"
      :cell-style="{ padding: '0px' }"
       row-class-name="table-row-cls"
    >
      <el-table-column
        type="selection"
        width="55"
        :selectable="tableRowHandle"
      />
      <el-table-column
        prop="name"
        label="角色名称"
        width="100"
        align="center"
      />

      <el-table-column
        prop="code"
        label="角色编码"
        width="200"
        align="center"
      />
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="170"
        align="center"
      />
      <el-table-column prop="remark" label="备注" align="center"/>
      <el-table-column
        prop="action"
        label="操作"
        width="250"
        fixed="right"
        align="center"
      >
        <template v-slot="scope">
          <el-button
            type="primary"
            :icon="Tools"
            @click="showMenuList(scope.row.id)"
            v-hasPerm="['system:role:menu']"
             size="small"
             text
            >分配权限</el-button
          >
          <el-button
            type="primary"
            :icon="Edit"
            v-hasPerm="['system:role:edit']"
            @click="saveSysRoleHandler(scope.row.id)"
             size="small"
             link
          >编辑</el-button>
          <el-popconfirm
            title="您确定删除这个记录吗？"
            @confirm="handleDelete(scope.row.id)"
            v-if="scope.row.code == 'admin' ? false : true"
          >
            <template #reference>
              <el-button
                type="danger"
                :icon="Delete"
                v-hasPerm="['system:role:delete']"
                 size="small"
                 link
              >删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
      <el-pagination
        v-model:current-page="queryForm.pageNum"
        v-model:page-size="queryForm.pageSize"
        :page-sizes="[5, 10, 20, 50, 100]"
        :small="false"
        :disabled="false"
        :background="false"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
  <role-dialog
    v-model="dialogVisible"
    :roleId="roleId"
    :dialogTitle="dialogTitle"
    :dialogVisible="dialogVisible"
    @initRoleList="initRoleList"
  />
  <menu-tree-list
    v-model="menuTreeDialogVisible"
    :roleId="roleId"
    :dialogVisible="menuTreeDialogVisible"
    :dialogTitle="menuDialogTitle"
  />
</template>
<script>
export default {
  name: "role",
};
</script>
<script setup>
import { ref, onMounted } from "vue";
import http, { getServerUrl } from "@/utils/request";
import qs from "qs";
import { ElMessage, ElMessageBox } from "element-plus";
import load from "@/utils/load.js"; // 引入

import {
  Delete,
  DocumentAdd,
  Edit,
  RefreshRight,
  Search,
  Tools,
} from "@element-plus/icons-vue";

import RoleDialog from "./components/RoleDialog";
import MenuTreeList from "./components/MenuTreeList";

const tableData = ref([]);
const total = ref(0);
const queryForm = ref({
  query: "",
  pageNum: 1,
  pageSize: 5,
});
const dialogVisible = ref(false);
const roleId = ref(-1);
const dialogTitle = ref("");
const delBtnStatus = ref(true);
const multipleSelection = ref([]);
const roleDialogVisible = ref(false);
const menuTreeDialogVisible = ref(false);
const menuDialogTitle = ref("");

const sysRoleList = ref([]);
// const selectMenu = ref([]);

const showMenuList = async (rId) => {
  menuTreeDialogVisible.value = true;
  menuDialogTitle.value = "分配权限";
  roleId.value = rId;
};

//新增角色
const saveSysRoleHandler = (rId) => {
  if (rId > 0) {
    roleId.value = rId;
    dialogTitle.value = "编辑角色";
  } else {
    roleId.value = -1;
    dialogTitle.value = "新增角色";
  }
  dialogVisible.value = true;
};
const getRoleList = () => {
  initRoleList(1);
};
const initRoleList = async (pageNum) => {
  load.show()
  if (pageNum) queryForm.value.pageNum = pageNum;
  let result = await http.post("sys/role/list", queryForm.value);
  let res = result.data;
  if (res.code == 200) {
    tableData.value = res.data.roleList;
    total.value = res.data.total;
     setTimeout(() => {
      load.hide();
    },500);
  } else {
     load.hide();
  }
};
const handleSizeChange = (val) => {
  queryForm.value.pageSize = val;
  console.log("queryForm", queryForm);
  initRoleList();
};
const handleCurrentChange = (val) => {
  queryForm.value.pageNum = val;
  initRoleList();
};

const handleSelectionChange = (selection) => {
  // 有选择项才有批量删除
  if (selection.length > 0) delBtnStatus.value = false;
  else delBtnStatus.value = true;
  multipleSelection.value = selection;
};
const handleDelete = async (id) => {
  var ids = [];
  if (id) {
    ids.push(id);
  } else {
    multipleSelection.value.forEach((row) => {
      if (row.id != 1) ids.push(row.id);
    });
  }
  const res = await http.post("sys/role/delete", ids);
  const data = res.data;
  if (data.code == 200) {
    ElMessage({
      type: "success",
      message: data.msg,
    });
    initRoleList(1);
  } else {
    // ElMessage({
    //   type: "error",
    //   message: data.msg,
    // });
  }
};

const tableRowHandle = (row) => {
  if (row.length) {
    if (row.item.code == "admin") {
      return false;
    } else {
      return true;
    }
  } else {
    return true;
  }
};
onMounted(() => {
  initRoleList();
});
</script>

<style lang="less" scoped>


.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
.header {
  padding-bottom: 16px;
  box-sizing: border-box;
}

.el-pagination {
  float: right;
  padding: 20px;
  box-sizing: border-box;
}

.el-table__cell {
  word-break: break-word;
  background-color: #f8f8f9 !important;
  color: #515a6e;
  height: 40px;
  font-size: 13px;
}

.el-tag--small {
  margin-left: 5px;
}
</style>
<style lang="less">
.table-row-cls {
  .el-button + .el-button {
    margin-left: 0;
  }
}
</style>